<template>
  <div class="uploadSummary">
    <el-dialog title="上传会商会审纪要" class="dialog" :visible="uploadVisible" width="800px" @close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="纪要" prop="summary">
          <el-col :span="18">
            <el-input type="textarea" placeholder="请输入" :rows="4" v-model="form.summary"></el-input>
          </el-col>
        </el-form-item >
          <el-form-item label="文件">
              <el-upload
                  style="width: 130px"
                  action=""
                  :before-upload="beforeUpload"
              >
                  <el-button round type="primary" icon="el-icon-upload">上传附件</el-button>
              </el-upload>
          </el-form-item>
      </el-form>
        <div class="f-r a-c f-w" style="width: 600px;padding-left: 100px">
            <div
                style="position:relative;margin-right: 20px;margin-top: 20px"
                v-for="(file,index) in commonFileList" :key="index">
                <FileView2  :file="file" />
                <span class="close-icon" @click.stop="delFile(file.fileUrl)">
                    <i class="el-icon-close" />
                  </span>
            </div>
        </div>
        <div class="f-r a-c f-w" style="width: 600px;padding-left: 100px">
            <div
                style="position:relative;margin-right: 20px;margin-top: 20px"
                v-for="(file,index) in imageFileList"
                :key="index"
            >
                <el-image
                    style="width: 100px;height: 80px"
                    :src="file.fileUrl"
                />
                <span class="close-icon" @click.stop="delFile(file.fileUrl)">
                    <i class="el-icon-close" />
                  </span>
            </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="handleClose">取 消</el-button>
        <el-button class="sure" @click="uploadConsult">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getConsultDetailApi, uploadConsultApi} from '@/api/manageApi.js'
import { uploadFile } from "@/utils/request";
import FileView2 from '@/components/FileView2'
export default {
    components: {
        FileView2
    },
  props: {
    uploadVisible: {
      type: Boolean,
      default: false
    },
    consultId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        summary: ''
      },
        fileList: []
    }
  },
    watch: {
        uploadVisible(val) {
            if (val) {
                this.getConsultDetail()
            }
        }
    },
    computed: {
        commonFileList() {
           return this.fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) === -1)
        },
        imageFileList() {
            return this.fileList.filter(file => ['jpeg', 'gif', 'png'].indexOf(file.fileType) > -1)
        }
    },
  methods: {
      getConsultDetail() {
          getConsultDetailApi({
              id: this.consultId
          }).then(res => {
              this.fileList = []
              if (res.code == 0) {
                  if (res.data.file && typeof res.data.file === 'string' && res.data.file.includes('{')) {
                      this.fileList = JSON.parse(res.data.file)
                  }
                  this.form.summary = res.data.content
              }
          })
      },
    
      handleClose() {
      this.$refs.form.resetFields()
      this.$emit('update:uploadVisible', false)
    },
      beforeUpload(file) {
          uploadFile(file).then(res => {
              this.fileList.push({
                  fileName: res.fileName,
                  fileType: res.suffix,
                  fileUrl: res.imgUrl
              })
          })
          return false
      },
      delFile(fileUrl) {
        this.fileList.forEach((file,index) => {
            if (file.fileUrl === fileUrl) {
                this.fileList.splice(index, 1)
            }
        })
      },
      uploadConsult() {
      uploadConsultApi({
        id: this.consultId,
        content: this.form.summary,
        file: JSON.stringify(this.fileList)
      }).then(res => {
        if (res.code == 0) {
            this.fileList = []
            this.$emit('update:uploadVisible', false)
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$emit('refresh')
        }
      })
    }
  }
}
</script>
<style lang="scss">
.close-icon {
    cursor: pointer;
    color: red;
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: red;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    i {
        font-size: 14px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #ffffff;
        line-height: 18px;
    }
}

.uploadSummary {
  ::v-deep .el-dialog {
    width: 740px !important;
  }
    .uploadBox {
        .upload {
            width: 334px;
            height: 250px;
            border: 1px dotted #b1b1b1;
            border-radius: 11px;
            padding: 10px;
            .bgUpload {
                width: 104px;
                height: 104px;
                background: #f7f7f7;
                border-radius: 50%;
                margin: 40px auto 20px auto;
            }
            .icon {
                width: 43px;
                height: 43px;
                background: #2251f8;
                border-radius: 11px 11px 11px 11px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .desc2 {
                color: #2251f8;
            }
        }
    }
    
    .cancel {
    border: 1px solid #4880ff;
    font-size: 14px;
    color: #4880ff;
  }
  .sure {
    background: #4880ff;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
